<html>
	<head>
		<meta charset="utf-8">
		<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
		<title>leaflet-map-admin</title>
		<!-- 自定义样式 -->
		<link rel="stylesheet" href="css/layout.css" />
		<!-- API样式 -->
		<link rel="stylesheet" href="api/leaflet/leaflet.css" />
		<link rel="stylesheet" href="api/iview/iview.css" />
		<link rel="stylesheet" href="api/leaflet/leaflet.contextmenu.css" />
		<!-- 公共API -->
		<script src='api/vue/vue.js'></script>
		<script src='api/iview/zh-CN.js'></script>
		<script src='api/iview/iview.js'></script>

		<script src="api/leaflet/leaflet.js"></script>
		<script src="api/leaflet/leaflet.ChineseTmsProviders.js"></script>
		<script src="api/esri-leaflet/esri-leaflet.js" crossorigin=""></script>
		<script src="api/leaflet/leaflet.contextmenu.js"></script>

		<script src="api/leaflet/Leaflet.Editable.js"></script>
		<script src="api/leaflet/Path.Drag.js"></script>
		<!-- 给天地图ui组件库使用 -->
		<script src="api/jquery/jquery.min.js"></script>
		<!-- 高德API -->
		<script src="https://webapi.amap.com/maps?v=1.4.12&key=d9f88205b356834ff3acdb353ca914b9&plugin=AMap.Geocoder"></script>
		<!--引入高德UI组件库（1.0版本） -->
		<script src="//webapi.amap.com/ui/1.0/main.js"></script>
		<!-- 自定义工具类 -->
		<script src='libs/IBaseLayer.js'></script>
		<script src='libs/IBaseMap.js'></script>
		<!-- 自定义组件 -->
		<script src='libs/components.js'></script>
		<script src='libs/tool.js'></script>
		<script src="libs/coordtransform.js"></script>
		<script src="libs/api.js"></script>
		<!-- 自定义数据 -->
		<script src='data/120100.js'></script>
	</head>
	<body>
		<div id='app'>
			<div style="right: 10px;top: 10px;position: fixed;z-index: 9999;">
				<Tooltip content="打开或关闭定位搜索" placement="left-start" :delay="1000">
					<i-button @click="showPOISearch" title="定位搜索">
						<Icon type="ios-search-strong" size="20"></Icon>
					</i-button>
				</Tooltip>
				<div id="pickerBox" v-if="poiSearchVisible">
					<poi-picker v-on:info-selected="onInfoSelected"></poi-picker>
				</div>
			</div>
			<div style="right: 10px;top: 50px;position: fixed;z-index: 9999;">
				<Tooltip content="点击地图范围缩放到初始范围" placement="left-start" :delay="1000">
					<i-button title="初始视图" @click="initView">
						<Icon type="ios-world-outline" size="20"></Icon>
					</i-button>
				</Tooltip>
			</div>
			<div style="right: 10px;top: 90px;position: fixed;z-index: 9999;">
				<Tooltip content="清除地图上所有的临时绘制" placement="left-start" :delay="1000">
					<i-button size="large" title="清除临时绘制" @click="clearView">
						<Icon type="ios-close-outline" size="20"></Icon>
					</i-button>
				</Tooltip>
			</div>
			<!-- <div style="right: 10px;top: 150px;position: fixed;z-index: 9999;">
				<i-button size="large" title="关联数据" @click="clearView">
					<Icon type="ios-color-wand-outline" size="20"></Icon>
				</i-button>
			</div> -->
			<div style="right: 10px;top: 190px;position: fixed;z-index: 9999;" v-if="editEnabled">
				<!-- <Tooltip content="点击开始绘制,双击结束绘制" placement="left-start" :delay="1000"> -->
				<i-button size="large" title="新增" @click="showDrawBox">
					<Icon type="ios-gear-outline" size="20"></Icon>
					<!-- <Icon type="ios-browsers-outline"></Icon> -->
				</i-button>
				<!-- </Tooltip> -->
				<div id="drawBox" v-if="paneVisible">
					<Button-group>
						<i-button @click="startAddPolygonFeature" type="info">
							多边形
						</i-button>
						<i-button @click="startAddRectFeature" type="info">
							矩形
						</i-button>
					</Button-group>
				</div>
			</div>
			<div style="right: 10px;top: 230px;position: fixed;z-index: 9999;" v-if="editEnabled">
				<Tooltip content="点击按钮后双击选择要编辑的要素" placement="left-start" :delay="1000">
					<i-button size="large" title="编辑" @click="startUpdateFeature">
						<Icon type="ios-compose-outline" size="20"></Icon>
					</i-button>
				</Tooltip>
			</div>
			<div style="right: 10px;top: 270px;position: fixed;z-index: 9999;" v-if="editEnabled">
				<Tooltip placement="left-start" content="使用CTRL+鼠标左键点击要素进行删除">
					<i-button size="large" title="删除" @click="startDelFeature">
						<Icon type="ios-minus-outline" size="20"></Icon>
					</i-button>
				</Tooltip>
			</div>
			<!-- <div style="right: 10px;bottom: 10px;position: fixed;z-index: 9999;">

				<i-button size="large" title="信息" @click="showInfo">
					<Icon type="ios-information-outline" size="20"></Icon>
				</i-button>
			</div> -->
			<div style="right: 10px;bottom: 10px;position: fixed;z-index: 9999;">
				<float-pane></float-pane>
			</div>
			<div id="mapid"></div>
		</div>
		<!-- 需要放在末尾 -->
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					poiSearchVisible: false,
					paneVisible: false,
					lmap: null,
					llayer: null,
					markers: [],
					screenLatLng: null,
					editEnabled: false,
					hightlights: null,
					duration: 10,
					mapid: 'objectid',
					bussid: 'id'
				},
				mounted: function() {
					//地图应当放在这个位置初始化,不能放在cerated中
					this.initMap();

					var drawid = getExchangeInfo().drawingCode;
					let that = this;
					this.llayer.editPolygonLayer.query().where(this.mapid + "='" + drawid + "'").run(function(eerror,
						featureCollection,
						response) {
						if (featureCollection.features.length > 0) {

							that.hightlights = L.geoJSON(featureCollection.features, {
								style: function(feature) {
									return {
										color: 'yellow',
										weight: 4,
										opacity: 1,
										fillOpacity: 0
									};
								}
							}).addTo(that.lmap.map);
							that.$Message.success({
								content: '已定位到要素，高亮<b>' + that.duration + 'S</b>后自动清除!',
								duration: that.duration
							});
							setTimeout(function() {
								that.lmap.map.removeLayer(that.hightlights);
							}, that.duration * 1000);

							let latlngbounds = that.hightlights.getBounds();
							that.lmap.map.fitBounds(latlngbounds);
						} else {
							that.$Message.warning({
								content: '没有定位到关联的要素，请进行关联!',
								duration: that.duration
							});
						}
					});
				},
				methods: {
					initMap() {
						//初始化基础图层
						this.llayer = Object.create(IBL);

						this.llayer.bussid = this.bussid;
						this.llayer.init();
						//初始化Map
						this.lmap = Object.create(IBM);
						this.lmap.nodeid = "mapid";
						this.lmap.mapConfig = {
							editable: true,
							center: [39.16, 117.18],
							zoom: 12,
							zoomControl: false,
							doubleClickZoom: false,
							attributionControl: false,
							contextmenu: this.editEnabled,
							contextmenuWidth: 140,
							contextmenuItems: [{
									text: '关联要素',
									callback: this.selectFeature
								},
								{
									text: '取消关联',
									callback: this.delcareFeature
								}
							]
						};
						this.lmap.ibl = this.llayer;
						this.lmap.init();

						let that = this;
						that.lmap.map.on('editable:drawing:commit', function(e) {

							var geoFeature = e.layer.toGeoJSON();

							geoFeature.properties[that.bussid] = getExchangeInfo().buildingCode;
							that.llayer.editPolygonLayer.addFeature(geoFeature, function() {
								that.$Message.success('新增成功!');
							});
							e.layer.toggleEdit();
							/* 清除绘制的临时图形 */
							that.lmap.map.removeLayer(e.layer);
							/* 清除该图层的所有监听 */
							//that.llayer.editPolygonLayer.off();
						});
						//监听右键点位置
						that.lmap.map.on('contextmenu', function(e) {
							var screenPoint = e.layerPoint;
							//屏幕坐标转地理坐标
							that.screenLatLng = that.lmap.map.layerPointToLatLng(screenPoint);
						});
					},
					showPOISearch: function() {
						this.poiSearchVisible = !this.poiSearchVisible;
					},
					onInfoSelected: function(info) {
						if (info.location) {
							let marker = addPopup(info, this.lmap.map);
							this.markers.push(marker);
						}
					},
					clearView: function() {
						let that = this;
						clearAllMarker(that.markers, that.lmap.map);
					},
					initView: function() {
						flyTo(this.lmap.map, '39.16', '117.18', 12);
					},
					startDelFeature: function() {
						let that = this;
						// when users CMD/CTRL click an editable feature, remove it from the map and delete it from the service
						that.llayer.editPolygonLayer.on('click', this.delHandlerFunction);
					},
					delHandlerFunction: function(e) {
						if ((e.originalEvent.ctrlKey) && !e.layer.editEnabled()) {
							let that = this;

							this.$Modal.confirm({
								title: '提醒',
								content: '<p>请确认删除，删除后将不可恢复！</p>',
								onOk: () => {
									// delete expects an id, not the whole geojson object
									that.llayer.editPolygonLayer.deleteFeature(e.layer.feature[that.bussid], function() {
										that.$Message.success('删除成功!');
									});
									//从地图中移除
									var label = that.llayer.labels[e.layer.feature.id];
									if (label) {
										that.lmap.map.removeLayer(label);
									}
									//从集合中移除
									for (var key in that.llayer.labels) {
										if (key == e.layer.feature.id) {
											delete that.llayer.labels[key];
										}
									}
								},
								onCancel: () => {
									that.$Message.info('您点击了取消');
								}
							});

							this.llayer.editPolygonLayer.off('click', this.delHandlerFunction);
						}
					},
					startUpdateFeature: function() {
						// 双击切换编辑状态
						// 退出自动更新要素信息
						let that = this;
						that.llayer.editPolygonLayer.on('dblclick', this.updateHandlerFunction);
					},
					updateHandlerFunction: function(e) {
						e.layer.toggleEdit();
						if (!e.layer.editEnabled()) {
							let that = this;
							this.llayer.editPolygonLayer.updateFeature(e.layer.toGeoJSON(), function() {
								that.$Message.success('更新成功!');
							});
							this.llayer.editPolygonLayer.off('dblclick', this.updateHandlerFunction);
						}
					},
					startAddPolygonFeature: function() {
						this.lmap.map.editTools.startPolygon();
					},
					startAddRectFeature: function() {
						this.lmap.map.editTools.startRectangle();
					},
					startAddCircleFeature: function() {
						this.lmap.map.editTools.cancelDrawing();
					},
					selectFeature: function() {
						let that = this;
						if (that.screenLatLng) {
							that.llayer.editPolygonLayer.query()["intersects"](this.screenLatLng).ids(function(error, ids) {
								if (ids.length > 0) {
									var feature1 = that.llayer.editPolygonLayer.getFeature(ids[0]);
									/* 获取并更新属性信息 */
									feature1.feature.properties[that.bussid] = getExchangeInfo().buildingCode;
									var geoFeature = feature1.toGeoJSON();
									that.llayer.editPolygonLayer.updateFeature(geoFeature, function() {
										that.$Message.success('关联成功!');
										//存储做数据交换使用
										commitExchangeInfo(getExchangeInfo().buildingCode, feature1.feature.properties[that.mapid]);
									});

								} else {
									that.$Message.warn('未能选择有效要素!');
								}
							});
						}
					},
					delcareFeature: function() {
						let that = this;
						if (that.screenLatLng) {
							that.llayer.editPolygonLayer.query()["intersects"](this.screenLatLng).ids(function(error, ids) {
								if (ids.length > 0) {
									var feature1 = that.llayer.editPolygonLayer.getFeature(ids[0]);
									/* 获取并更新属性信息 */
									feature1.feature.properties[that.bussid] = null;
									var geoFeature = feature1.toGeoJSON();
									that.llayer.editPolygonLayer.updateFeature(geoFeature, function() {
										//从地图中移除
										var label = that.llayer.labels[feature1.feature.id];
										if (label) {
											that.lmap.map.removeLayer(label);
										}
										//从集合中移除
										for (var key in that.llayer.labels) {
											if (key == feature1.feature.id) {
												delete that.llayer.labels[key];
											}
										}
										that.$Message.success('取消关联成功!');
										//存储做数据交换使用
										commitExchangeInfo(getExchangeInfo().buildingCode, '');
									});

								} else {
									that.$Message.warn('未能选择有效要素!');
								}
							});
						}
					},
					showDrawBox: function() {
						this.paneVisible = !this.paneVisible;
					}
				},
				created() {
					setBussInfo();
					//0:编辑,1:查看
					if (getExchangeInfo().oprationCode == '0') {
						this.editEnabled = true;
					} else {
						this.editEnabled = false;
					}

				}
			})
		</script>

	</body>
</html>
